<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ez="http://java.sun.com/jsf/composite/ezcomp">
    <!--
    Author Lu Xiaodi
    -->
    <h:head> 
        <title>IOTR</title> 

        <style type="text/css"> 

            .gritter-notice-wrapper { 
                left:200px; 
                top:50px; 
            } 
        </style> 

    </h:head> 
    <h:body>                 
        <ez:OutletManagerIOTRHeaderMenu/>

        <ez:OutletManagerIOTRTitle/>

        <ez:OutletManagerIOTRMenu/>

        <p:layout style="table-layout:auto; height:600px ">
            <p:layoutUnit position="left" header="Navigation" width="300">
                <ez:OutletManagerIOTRRMMenu/>
            </p:layoutUnit>
            <p:layoutUnit position="center" header="Settings" scrollable="true">
                <p:tabView>
                    <c:forEach var="anArea" items="#{areaMgmtBean.allAreas}">
                        <br/>
                        <br/>
                        <p:tab title="#{anArea}">
                            <p:panel>
                                <h:form>
                                    <p:dataTable var="timeSlot" value="#{timeslotMgmtBean.getTimeslots(anArea.getId())}" id="timeSlotList"
                                                 rowEditListener="#{timeslotMgmtBean.onEditRow}">
                                        <f:facet name="header" >
                                            <h:outputText value="#{anArea}"/>
                                        </f:facet>
                                        <p:column headerText="Time" sortBy="#{timeSlot.timeStr}">
                                            <h:outputText value="#{timeSlot.timeStr}"/>
                                        </p:column>
                                        <p:column headerText="Monday">
                                            <p:cellEditor>  
                                                <f:facet name="output">  
                                                    <h:outputText value="#{timeSlot.quotaMon}">
                                                    </h:outputText>
                                                </f:facet>
                                                <f:facet name="input">
                                                    <p:inputText style="width:90%" value="#{timeSlot.quotaMon}"/>
                                                </f:facet>
                                            </p:cellEditor>
                                        </p:column>
                                        <p:column headerText="Tuesday">
                                            <p:cellEditor>  
                                                <f:facet name="output">  
                                                    <h:outputText value="#{timeSlot.quotaTue}">
                                                    </h:outputText>
                                                </f:facet>
                                                <f:facet name="input">
                                                    <p:inputText style="width:90%" value="#{timeSlot.quotaTue}"/>
                                                </f:facet>
                                            </p:cellEditor>
                                        </p:column>
                                        <p:column headerText="Wednesday">
                                            <p:cellEditor>  
                                                <f:facet name="output">  
                                                    <h:outputText value="#{timeSlot.quotaWed}">
                                                    </h:outputText>
                                                </f:facet>
                                                <f:facet name="input">
                                                    <p:inputText style="width:90%" value="#{timeSlot.quotaWed}"/>
                                                </f:facet>
                                            </p:cellEditor>
                                        </p:column>
                                        <p:column headerText="Thursday">
                                            <p:cellEditor>  
                                                <f:facet name="output">  
                                                    <h:outputText value="#{timeSlot.quotaThu}">
                                                    </h:outputText>
                                                </f:facet>
                                                <f:facet name="input">
                                                    <p:inputText style="width:90%" value="#{timeSlot.quotaThu}"/>
                                                </f:facet>
                                            </p:cellEditor>
                                        </p:column>
                                        <p:column headerText="Friday">
                                            <p:cellEditor>  
                                                <f:facet name="output">  
                                                    <h:outputText value="#{timeSlot.quotaFri}">
                                                    </h:outputText>
                                                </f:facet>
                                                <f:facet name="input">
                                                    <p:inputText style="width:90%" value="#{timeSlot.quotaFri}"/>
                                                </f:facet>
                                            </p:cellEditor>
                                        </p:column>
                                        <p:column headerText="Saturday">
                                            <p:cellEditor>  
                                                <f:facet name="output">  
                                                    <h:outputText value="#{timeSlot.quotaSat}">
                                                    </h:outputText>
                                                </f:facet>
                                                <f:facet name="input">
                                                    <p:inputText style="width:90%" value="#{timeSlot.quotaSat}"/>
                                                </f:facet>
                                            </p:cellEditor>
                                        </p:column>
                                        <p:column headerText="Sunday" >
                                            <p:cellEditor>  
                                                <f:facet name="output">  
                                                    <h:outputText value="#{timeSlot.quotaSun}">
                                                    </h:outputText>
                                                </f:facet>
                                                <f:facet name="input">
                                                    <p:inputText style="width:90%" value="#{timeSlot.quotaSun}"/>
                                                </f:facet>
                                            </p:cellEditor> 
                                        </p:column>
                                        <p:column headerText="Edit" style="width:5px">
                                            <p:rowEditor />
                                        </p:column>

                                        <p:column headerText="Delete" style="width:8px">
                                            <p:commandButton id ="button" ajax="false"
                                                             image="ui-icon ui-icon-trash"
                                                             actionListener="#{timeslotMgmtBean.removeTimeslot}" 
                                                             update="timeSlotTableForm" >
                                                <f:attribute name="time" value="#{timeSlot.tsTime}" />
                                            </p:commandButton>
                                        </p:column>
                                    </p:dataTable>  
                                    <br/>

                                    <p:commandButton id="newTimeslot" value="Add new timeslot" oncomplete="addDialog.show()"/>
                                </h:form>
                            </p:panel>
                        </p:tab>
                    </c:forEach>
                </p:tabView>


                <p:dialog id="addDialog" header="Add new timeslot" widgetVar="addDialog"
                          width="550" height="300" >  
                    <h:form>  
                        <h:outputLabel value="Add new timeslot for areaId: #{timeslotMgmtBean.areaId}"/>
                        <h:panelGrid columns="2" border="1">
                            <h:outputLabel value="Select hour:"/>
                            <h:outputLabel value="Select minute:"/>
                            <h:selectOneMenu value="#{timeslotMgmtBean.hour}">
                                <f:selectItems value="#{timeslotMgmtBean.allHours}"  
                                               var="hour"
                                               itemValue="#{hour}" />
                            </h:selectOneMenu>
                            <h:selectOneMenu value="#{timeslotMgmtBean.minute}">
                                <f:selectItems value="#{timeslotMgmtBean.allMinutes}"  
                                               var="minute"
                                               itemValue="#{minute}"/>  
                            </h:selectOneMenu>
                        </h:panelGrid>
                        <p:commandButton id="submitNewTimeslot" value="Add new" update="display"  
                                         actionListener="#{timeslotMgmtBean.addTimeslot}" ajax="false"
                                         oncomplete="addDialog.close()"/>
                    </h:form>  
                </p:dialog>
            </p:layoutUnit>
        </p:layout>
    </h:body> 
</html>